<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一次使用 doT</title>
    <!-- 引入 doT.min.js -->
    <script src="doT.min.js"></script>
    <!-- 引入 jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <!-- 1、定义渲染节点 开始 -->
    <ol id="drawing-node"></ol>
    <!-- 定义渲染节点 结束 -->
    <button id="load_more">加载更多...</button>
    <!-- 2、定义模板 开始 -->
    <script id="data-list" type="text/template">
        <!-- doT 语法学习-if-each 语句 -->
        {{? data.data_list.length}}
            <!-- each 循环数据 -->
            {{~data.data_list :value:key}}
                <li style="{{= add_color(key)}};">{{= value.title}}</li>
            {{~}}
        {{??}}
            <p>数据为空</p>
        {{?}}
    </script>
    <!-- 定义模板 结束 -->
    <script>
        // 3-1、定义模板数据
        var data={
            data_list:[
                {title:'Zig'},
                {title:"&lt;a href='https://www.yahoo.com/' target='_blank'&gt;Yahoo&lt;/a&gt;"},
                {title:'C++'},
            ],
        }
        // 定义函数、可以在模板中使用
        var add_color=function(index){
            var colors=['green','red'];
            var color='color:'+colors[parseInt(index)%2];
            return color;
        }
        // 3-2、调用 doT.template 函数、生成 模板 函数
        var dot_tpl=doT.template($("#data-list").text());
        // data 动态变化时、再次传入 dot_tpl 中
        var html=dot_tpl(data);
        // 3-3、在模板渲染节点 渲染 DOM
        $("#drawing-node").html(html);
        // 加载更多 开始
        $("#load_more").click(function(){
            console.log('加载更多...');
            $.ajax({
                url:'../data_list.php',
                type:'get',
                success:function(back){
                    var result=back.data;
                    var info=back.info;
                    data.data_list=result;
                    // 生成 HTML
                    var html=dot_tpl(data);
                    // 渲染 HTML
                    $("#drawing-node").append(html);
                    console.log(info);
                },
                error:function(){
                    console.log('网络不稳定，加载失败...');
                },
            });
        });
        // 加载更多 结束
    </script>
</body>
</html>
